<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-27 21:09:55
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-05-07 17:01:34
-->
<template>
    <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="案例" name="first">
            <el-scrollbar>
                <!-- 普通树 -->
                <ExamplePanel file="tree1.text"
                    desc="仅需要提供基础的数据data,以及数据展示配置props（<span style=''> 数据格式非label,children格式需要配置此项</span>）就可以实现。具体实现可以参考案例源码。"
                    title="案例1-普通静态展示树">
                    <template v-slot:example>
                        <div style="height: 200px;">
                            <Tree1></Tree1>
                        </div>
                    </template>
                </ExamplePanel>

                <!-- 带有普通搜索框树 -->
                <ExamplePanel file="tree2.text"
                    desc="普通搜索框树：只能搜索节点树已加载的数据，对于节点树没有加载的数据是实现不了的（本质就是前端对已获取到的数据进行过滤）。主要应用在一些小规模数据，并且这些数据一般后端接口会一次性返回。"
                    title="案例2-带有普通搜索框展示树">
                    <template v-slot:example>
                        <div style="height: 200px;">
                            <Tree2></Tree2>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 懒加载树 -->
                <ExamplePanel file="tree3.text" title="案例3-懒加载树："
                    :desc="`懒加载树：一般应用于大规模数据展示；只需要通过lazy: true,remoteLoadData（他是一个函数接受node作为参数，业务侧可以通过node节点数据，自定义自己的远程接口参数，返回一个Promise实例）远程获取数据配置，即可完成数据加载。`">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Tree3></Tree3>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 带有远程搜索框树 -->
                <ExamplePanel file="4.text" title="案例4-带有远程搜索框树："
                    :desc="`带有远程搜索框树：一般应用于懒加载的树（大规模数据展示）；实现逻辑远程搜索接口获取搜索节点在整个树中的id路径，节点树根据这个id路径进行过滤。`">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Tree4></Tree4>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 带有记忆功能的树 -->
                <ExamplePanel file="tree5.text" title="案例5-带有记忆功能的树："
                    :desc="`带有记忆功能的树：一般应用于路由跳转后，下一次再次进入该页面，记录上一次的展开项，搜索项，以及选中的节点。通过配置memory：业务侧保准全局唯一，nodeKey：节点的唯一标识（一般是接口返回数据的唯一标识，默认是id）`">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Tree5></Tree5>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 带有回显和选择功能的树 -->
                <ExamplePanel file="tree6.text" title="案例6-带有回显和选择功能的树："
                    :desc="`带有回显和选择功能的树：在有些场景我们需要回显选中项（从接口中获取已选中的数据）`">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Tree6></Tree6>
                        </div>
                    </template>
                </ExamplePanel>
            </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="文档" name="second">
            <Document></Document>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ExamplePanel from '@/pages/components/ExamplePanel.vue'
import Document from './components/Document.vue'
import Tree1 from './components/Tree1/index.vue'
import Tree2 from './components/Tree2/index.vue'
import Tree3 from './components/Tree3/index.vue'
import Tree4 from './components/Tree4/index.vue'
import Tree5 from './components/Tree5/index.vue'
import Tree6 from './components/Tree6/index.vue'
const activeName = ref('first')
</script>